<template>
	<div class="brandList">
		<el-card shadow="hover">
			<div class="brand-list mb15">
				<el-row>
					<el-col :span="24" style="text">
						<el-form-item>
							<div style="padding-left: 20px">
								<el-button type="success" @click="onOpenAdd">新增标签</el-button>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</div>
			<el-table v-loading="state.loading" :data="state.tableData" style="width: 100%">
				<el-table-column type="index" width="80px" label="序号"></el-table-column>
				<el-table-column prop="tagName" label="标签名称" align="center"></el-table-column>
				<el-table-column label="编辑" width="120px">
					<template #default="scope">
						<el-button text :loading="state.deleteLoading" type="primary" @click="setDetailId(scope.row)">编辑</el-button>
						<el-button text :loading="state.deleteLoading" type="danger" @click="beforeDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-dialog v-model="state.dialogVisible" :title="state.dialoagTitle" destroy-on-close width="33%">
			<el-input v-model="state.tagName" placeholder="请输入标签名称" clearable></el-input>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog">取消</el-button>
					<el-button type="primary" @click="submitSave(state)">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="LabelList">
import { useInit, useEdit, useSave, useDel } from './hook';

const { state, getlist, onOpenAdd, closeDialog } = useInit();
const { setDetailId } = useEdit(state);
const { submitSave } = useSave(getlist);
const { beforeDelete } = useDel(getlist);

onMounted(() => {
	getlist();
});
</script>
<style lang="scss" scoped></style>
